<template>
  <!-- 添加或修改配置对话框 -->
  <el-card class="card-body">
    <sunTitle title="新增" />
    <el-row :gutter="20" class="row-style">
      <el-col :span="3" class="left-layout">
        <Tree @handleNodeClick="handleNodeClick" title="成果目录" />
      </el-col>
      <el-col :span="15" class="left-layout">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
          <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="基本信息" name="first">
              <el-form-item label="地址" prop="address">
                <el-input v-model="form.address" placeholder="请输入地址" />
              </el-form-item>
              <el-form-item prop="addressType" label="地址类型">
                <el-select
                  v-model="form.addressType"
                  placeholder="请选择地址类型"
                  clearable
                  style="width: 200px"
                >
                  <el-option label="离线地址" value="0" />
                  <el-option label="在线地址" value="1" />
                </el-select>
              </el-form-item>
              <el-form-item label="坐标" prop="coordinate">
                <el-input v-model="form.coordinate" placeholder="请输入坐标" />
              </el-form-item>
              <el-form-item label="图片url" prop="imageUrl">
                <el-input v-model="form.imageUrl" placeholder="请输入图片url" />
              </el-form-item>
              <el-form-item label="视频url" prop="videoUrl">
                <el-input v-model="form.videoUrl" placeholder="请输入视频url" />
              </el-form-item>
              <el-form-item label="备注" prop="memo">
                <el-input v-model="form.memo" placeholder="请输入备注" />
              </el-form-item>
              <el-form-item label="上传" prop="num">
                <Upload
                  :limit="1"
                  :fileSize="150"
                  :value="files"
                  :fileType="fileType"
                  :isShowTip="true"
                  @modelValue="modelValue"
                ></Upload>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="信息2" name="second">
              <el-form-item label="hobby" prop="checkList">
                <el-checkbox-group v-model="hobbyArr" class="menu-group">
                  <el-checkbox v-for="city in cities" :key="city" :label="city">
                    {{ city }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="city" prop="checkList">
                <div class="checkList">
                  <!-- <span>复选数据2:</span> -->
                  <el-checkbox-group v-model="cityArr" class="menu-group">
                    <el-checkbox
                      v-for="city in cities"
                      :key="city"
                      :label="city"
                    >
                      {{ city }}
                    </el-checkbox>
                  </el-checkbox-group>
                </div>
              </el-form-item>
              <el-form-item label="单选" prop="radio">
                <el-radio-group v-model="form.radio">
                  <el-radio :label="1">Option A</el-radio>
                  <el-radio :label="2">Option B</el-radio>
                  <el-radio :label="3">Option C</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="选取方式" prop="mode">
                <el-radio-group v-model="form.mode">
                  <el-radio-button
                    v-for="item in type"
                    :key="item"
                    :label="item"
                    @change="handleChange(item)"
                  >
                    {{ item }}
                  </el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="中介机构" prop="type" v-if="ShowFlag == 1">
                <el-button type="primary">选取中介</el-button>
              </el-form-item>
              <el-form-item label="中介机构" prop="type2" v-if="ShowFlag == 2">
                <el-button type="success">随机选取</el-button>
              </el-form-item>
              <el-form-item label="中介机构" prop="type3" v-if="ShowFlag == 3">
                <el-button type="info">公开竞价</el-button>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="信息3" name="third">
              <el-form-item label="选择时间" prop="Date">
                <el-date-picker
                  v-model="form.Date"
                  type="daterange"
                  range-separator="~"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="选择起止日期及时间" prop="date">
                <el-date-picker
                  v-model="form.date"
                  type="datetimerange"
                  range-separator="~"
                  start-placeholder="开始时间及日期"
                  end-placeholder="结束时间及日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="选择日期及时间" prop="time">
                <el-date-picker
                  v-model="form.time"
                  type="datetime"
                  placeholder="选择日期时间"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="数字" prop="num">
                <el-input-number v-model="form.num" :min="1" :max="10" />
              </el-form-item>
              <el-form-item label="富文本" prop="num">
                <Editor
                  :min-height="152"
                  v-model="form.noticeContent"
                  @on-change="changeVal"
                />
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="列表组件" name="fiveth">
              <dcList @tableData="tableData" />
            </el-tab-pane>
            <el-tab-pane label="树组件" name="sixth">
              <SeniorTree @handleNodeClick="handleNodeClick" />
            </el-tab-pane>
            <!-- <el-tab-pane label="多表组件" name="seventh">
              <moreList @tableData="tableData"/>
            </el-tab-pane>-->
          </el-tabs>
          <el-form-item>
            <div class="dialog-footer">
              <el-button @click="cancel">取 消</el-button>
              <el-button type="primary" @click="submitForm" v-if="isShow"
                >确 定</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="6">
        <div class="map-default-container">
          <img src="@/assets/images/map.png" alt />
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
//API接口
import api from "@/api";
//引入消息弹出框
import { ElMessage, ElMessageBox } from "element-plus";
//上传组件
import Upload from "@/components/FileUpload/index.vue";
//富文本组件
import Editor from "@/components/Editor/index.vue";
//标题组件
import sunTitle from "./components/sunTitle.vue";
//组件
import Tree from "./components/tree/index.vue";
import SeniorTree from "./components/tree/seniorTree.vue";
import dcList from "./components/list/dcList.vue";
import moreList from "./components/list/moreList.vue";
import { getUrlParam } from "@/utils/index";

export default {
  components: {
    Upload,
    Editor,
    sunTitle,
    Tree,
    SeniorTree,
    dcList,
    moreList,
  },
  props: {
    formList: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      //上传文件类型
      fileType: [
        "jpeg",
        "jpg",
        "png",
        "gif",
        "pdf",
        "doc",
        "docx",
        "txt",
        "zip",
      ],
      //tab切换默认选中第一个
      activeName: "first",

      cities: ["Shanghai", "Beijing", "Shenzhen"],
      type: ["直接选取", "随机选取", "公开竞价"],
      //表单验证
      form: {
        check: [],
        noticeContent: "",
        tableData: [],

        hobby: "", // 复选框--爱好
        wantgoaddress: "", // 复选框--城市
      },
      files: "",
      //复选框
      hobbyArr: [],
      cityArr: [],
      isShow: true, //详情页面确定按钮隐藏
      ShowFlag: undefined, //组件状态
      rules: {
        address: [
          {
            required: true,
            message: "地址不能为空",
            trigger: "blur",
          },
        ],
      }, //表单验证
    };
  },
  /**
   * 挂载函数
   */
  mounted() {
    //根据状态判断是否请求详情接口
    let isType = this.$route.query.isType;
    if (isType === "edit" || isType === "details") {
      //编辑以及详情通过路由跳转传参
      let editid = this.$route.query.id;
      //如果事项请页面隐藏提交按钮
      if (this.$route.query.type) {
        this.isShow = false;
      }
      //请求详情接口表单回显数据
      api.manager.editId(editid).then((res) => {
        if (res.data) {
          delete res.data.params;
          this.form = res.data;
          //上传回显
          this.files = getUrlParam(res.data.imageUrl);
          // this.files = res.data.imageUrl;
          if (res.data.hobby || res.data.wantgoaddress) {
            // 复选框回显 ["shenzhen","shanghai","beijing"]
            this.hobbyArr = res.data.hobby.split(",");
            this.cityArr = res.data.wantgoaddress.split(",");
          }
        }
      });
    }
  },
  methods: {
    /**
     * 点击Tree节点
     * @param {Object} node
     */
    async handleNodeClick(node) {
      //设置PID值
      this.queryParams.pid = node.id;
    },
    /**切换显示不同组件 */
    handleChange(val) {
      if (val == "直接选取") {
        this.ShowFlag = 1;
      } else if (val == "随机选取") {
        this.ShowFlag = 2;
      } else if (val == "公开竞价") {
        this.ShowFlag = 3;
      }
    },
    /**
     * 富文本数据
     */
    changeVal(list) {
      this.form.noticeContent = list.html;
    },
    /**
     * 上传数据
     */
    modelValue(list) {
      list.map((item) => {
        this.form.fileList = item.url;
      });
    },
    /**
     * 多表数据
     */
    tableData(list) {
      let index = "";
      for (let i = 0; i < list.length; i++) {
        if (list[i] == undefined) {
          index = i;
          list.splice(index, 1);
        }
      }
      this.form.tableData = list;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["formRef"].validate((valid) => {
        if (valid) {
          if (this.form.id != undefined) {
            // 复选框参数数据类型转换 "shenzhen , shanghai , beijing"
            this.form.hobby = this.hobbyArr.toString();
            this.form.wantgoaddress = this.cityArr.toString();

            api.manager
              .edit(this.form)
              .then((res) => {
                //弹出提示
                ElMessage({
                  type: "success",
                  message: res.msg,
                });
              })
              .catch((err) => {
                ElMessage({
                  type: "error",
                  message: err.msg,
                });
              });
            this.$router.go(-1);
          } else {
            // 复选框参数数据类型转换 "shenzhen , shanghai , beijing"
            this.form.hobby = this.hobbyArr.toString();
            this.form.wantgoaddress = this.cityArr.toString();
            api.manager
              .add(this.form)
              .then((response) => {
                ElMessage({
                  type: "success",
                  message: response.msg,
                });
              })
              .catch((err) => {
                ElMessage({
                  type: "error",
                  message: err.msg,
                });
              });
            this.$router.go(-1);
          }
        }
      });
    },
    /** 取消按钮 */
    cancel() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.el-tabs__nav-scroll) {
  padding: 0 20px;
}
:deep(.el-tabs__content) {
  height: 560px;
  overflow-y: scroll;
}
</style>
